<script lang='ts' setup>
import { useRouter } from 'vue-router'

defineProps({
  data: Array,
  default: () => [],
})
const router = useRouter()

function goHouse(id: number) {
  router.push(`/house/${id}`)
}
</script>

<template>
  <div>
    <el-card v-for="item in data as any" :key="item.id" style="width: 970px" shadow="hover" class="m-4 p-0" @click="goHouse(item.houseId)">
      <div class="parent">
        <div class="div1">
          <el-image style="width: 180px; height: 120px" :src="item.img" fit="fill" />
        </div>
        <div class="div2 view-text">
          {{ item.title }}
          <div class="des view-text">
            {{ item.des }}
          </div>
          <div class="mt-2 flex items-center justify-start">
            <img src="/public/address.png" class="h-4 w-4">
            <div class="ml-1 text-sm text-gray-500">
              {{ item.address }}
            </div>
          </div>
        </div>
        <div class="div3">
          <div class="mb-4 mr-10 mt-2 flex items-center justify-center">
            <img src="/public/star_red.png" class="h-4 w-5">
            <div class="ml-1">
              {{ item.stars }}
            </div>
          </div>
          <span class="text-xl font-bold">¥ {{ item.price }} </span> /晚
        </div>
        <div class="div4">
          <div class="time">
            入住时间：{{ item.startTime }} ~ {{ item.endTime }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang='scss' scoped>
.des {
  font-size: 14px;
  color: #717171;
  margin-top: 10px;
}
.view-text {
  /* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
  width: 21em;
  overflow: hidden;
  /* 显示省略符号来代表被修剪的文本。 */
  text-overflow: ellipsis;
  /* 文本不换行 */
  white-space: nowrap;
}
.time {
  color: #9499a0;
  font-size: 13px;
  margin-right: 40px;
}
.parent {
  display: grid;
  // grid-template-columns: repeat(3, 1fr);
  grid-template-columns: 200px 400px 370px;
  grid-template-rows: 100px 30px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 {
  grid-area: 1 / 1 / 4 / 2;
}
.div2 {
  margin-top: 10px;
  grid-area: 1 / 2 / 2 / 3;
  font-size: 18px;
}
.div3 {
  grid-area: 1 / 3 / 2 / 4;
  justify-self: end;
  margin-right: 94px;
}
.div4 {
  grid-area: 2 / 3 / 3 / 4;
  justify-self: end;
  margin-right: 10px;
}
</style>
